<template>
  <div class="mod-user">
    <avue-crud
      ref="crudRef"
      :page="page"
      :data="dataList"
      :option="tableOption"
      @search-change="onSearch"
      @selection-change="selectionChange"
      @on-load="getDataList"
    >

      <template #userIds-search>
        <el-input v-model="queryParameter.userIdsLike" placeholder="用户ID" clearable/>
      </template>

      <template #orderNumber-search>
        <el-input v-model="queryParameter.orderNumberLike" placeholder="订单号" clearable/>
      </template>

      <template #menu-left>
        <el-button
          v-if="isAuth('shop:oneLevelDistributionGrant:save')"
          type="primary"
          icon="el-icon-plus"
          @click="onAddOrUpdate()"
        >
          新增
        </el-button>
      </template>

      <template #type="scope">
        <el-tag v-if="scope.row.type === 'recommendFirstOrder'"> 推荐新用户首次下单奖 </el-tag>
        <el-tag v-else-if="scope.row.type === 'memberRepeatOrder'"> 会员重复下单奖 </el-tag>
        <el-tag v-else-if="scope.row.type === 'teamLeaderReward'"> 团长奖励 </el-tag>
        <el-tag v-else-if="scope.row.type === 'dayBonus'"> 每天分红 </el-tag>
      </template>

      <template #userJson="scope">
          
          <el-popover placement="right" :width="400" trigger="hover">
            <template #reference>
              <el-button style="margin-right: 16px">查看奖励用户</el-button>
            </template>
            <el-table :data="scope.row.userJsonObj">
              <el-table-column width="150" property="userId" label="ID" />
              <el-table-column width="100" property="nickName" label="账号" />
              <el-table-column width="300" property="realName" label="姓名" />
            </el-table>
          </el-popover>
      </template>

      <!--<template #pic="scope">
        <span v-if="scope.row.pic" class="avue-crud__img">
          <el-icon><Document /></el-icon>
        </span>
        <span v-else>-</span>
      </template>

      <template #status="scope">
        <el-tag v-if="scope.row.status === 0" type="danger"> 禁用 </el-tag>
        <el-tag v-else> 正常 </el-tag>
      </template>-->

      <template #menu="scope">
        <el-button
          v-if="isAuth('shop:oneLevelDistributionGrant:update')"
          type="primary"
          icon="el-icon-edit"
          @click.stop="onAddOrUpdate(scope.row.id)"
        >
          编辑
        </el-button>

        <el-button
          v-if="isAuth('shop:oneLevelDistributionGrant:delete')"
          type="danger"
          icon="el-icon-delete"
          @click.stop="onDelete(scope.row.id)"
        >
          删除
        </el-button>
      </template>
    </avue-crud>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdateRef"
      @refresh-data-list="getDataList"
    />
  </div>
</template>

<script setup>
import { isAuth } from "@/utils";
import { tableOption } from "@/crud/shop/oneLevelDistributionGrant.js";
import AddOrUpdate from "./add-or-update.vue";

const dataList = ref([]);
const dataListLoading = ref(false);
const dataListSelections = ref([]);
const addOrUpdateVisible = ref(false);
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10, // 每页显示多少条
});

const queryParameter = reactive({
  userIdsLike:"",
  orderNumberLike:""
});

/**
 * 获取数据列表
 */
const getDataList = (pageParam, params, done) => {
  dataListLoading.value = true;
  http({
    url: http.adornUrl("/shop/oneLevelDistributionGrant/page"),
    method: "get",
    params: http.adornParams(
      Object.assign(
        {
          current: pageParam == null ? page.currentPage : pageParam.currentPage,
          size: pageParam == null ? page.pageSize : pageParam.pageSize,
          userIdsLike: queryParameter.userIdsLike,
          orderNumberLike: queryParameter.orderNumberLike
        },
        params
      )
    ),
  }).then(({ data }) => {
    dataList.value = data.records;
    page.total = data.total;
    dataListLoading.value = false;

    /**
     * 在el-table :data="" 直接用 JSON.parse 转换不可以,在这里转换可以,不知道为什么
     */
    dataList.value.forEach(i => {
      i['userJsonObj']= JSON.parse(i.userJson);
    });

    if (done) done();
  });
};

const addOrUpdateRef = ref(null);
/**
 * 新增 / 修改
 * @param id
 */
const onAddOrUpdate = (id) => {
  addOrUpdateVisible.value = true;
  nextTick(() => {
    addOrUpdateRef.value?.init(id);
  });
};

/**
 * 条件查询
 */
const onSearch = (params, done) => {
  getDataList(page, params, done);
};

/**
 * 多选变化
 */
const selectionChange = (val) => {
  dataListSelections.value = val;
};

const onDelete = (id) => {
  ElMessageBox.confirm("确定进行删除操作?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      http({
        url: http.adornUrl("/shop/oneLevelDistributionGrant/" + id),
        method: "delete",
        data: http.adornData({}),
      }).then(() => {
        ElMessage({
          message: "操作成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            getDataList();
          },
        });
      });
    })
    .catch(() => {});
};
</script>